<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/axios.min.js"></script>
</head>

<body>
    <div class="box">
        <p>
            用户名称： <input type="text" id="username">
        </p>
        <p>
            用户性别：
            <input type="radio" name="gender" value="男" id="g1"> 男
            <input type="radio" checked name="gender" value="女" id="g2"> 女
        </p>
        <p>
            用户年龄：
            <input type="number" id="age">
        </p>
        <p>
            联系方式：
            <input type="text" id="tel">
        </p>
        <p>
            用户住址：
            <select id="addr">
                <option value="湖北 武汉">湖北 武汉</option>
                <option value="陕西 西安">陕西 西安</option>
                <option value="陕西 榆林">陕西 榆林</option>
                <option value="山西 大同">山西 大同</option>
                <option value="山西 运城">山西 运城</option>
                <option value="山西 运城">辽宁 铁岭</option>
            </select>
        </p>

        <p>
            <button>添加用户</button>
        </p>
    </div>


    <script>

        // 注册事件，获取表单的数据
        const btn = document.querySelector('button');
        btn.onclick = async function () {
            // 获取表单的所有数据
            // console.log(document.querySelector('#username').value);
            // console.log(document.querySelector('#age').value);
            // console.log(document.querySelector('#tel').value);
            // console.log(document.querySelector('#addr').value);
            // 性别，原生的方式需要遍历
            let id = '';
            document.getElementsByName('gender').forEach(item => {
                if (item.checked) {
                    id = item.id;
                }
            })
            // console.log(document.querySelector('#' + id).value);

            // 需要整理成一个对象
            const data = {
                name: document.querySelector('#username').value,
                age: document.querySelector('#age').value,
                tel: document.querySelector('#tel').value,
                addr: document.querySelector('#addr').value,
                gender: document.querySelector('#' + id).value
            }

            // console.log(data);
            // const res = await axios({
            //     method: 'post',
            //     url: 'http://127.0.0.1:3000/users',
            //     data
            // })
            // const url = 'http://127.0.0.1:3000/users';
            // const res = await axios.post(url, data);

            // console.log(res);
            if (res.status === 200) {
                alert(res.data.msg);

                // 跳转到指定页面
                location.href = './index.html'
            }
        }

    </script>
</body>

</html>